/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
<view class="index_class">
	<view class="setup">
		<view class="per-lists" style="margin-top: 0;">
			<view class="items title">
				<view>{{$t('头像')}}</view>
				<!-- #ifdef MP-WEIXIN -->
				<view style="display: flex;justify-content: flex-end;align-items: center;">
					<button  class="upload avatar-button" open-type="chooseAvatar" @chooseavatar="onUploadAvatar">
						<view  class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<u-image v-if="userInfo.headimgurl != ''" width="100" height="100" border-radius="10"
											 :src="userInfo.headimgurl"></u-image>
							<u-icon v-if="userInfo.headimgurl == ''" name="account-fill" size="60" color="#c0c4cc">
							</u-icon>
						</view>
					</button>
				</view>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
								<u-upload class="upload" :action="upLoadAction" :custom-btn="true" ref="upload"
													:form-data="formData" :show-progress="false" :preview-full-image="false"
													@on-success="uploadSuccess($event)" max-count="1" :upload-text="$t('上传头像')" width="100" height="100">
									<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
										<u-image v-if="userInfo.headimgurl != ''" width="100" height="100" border-radius="10"
														 :src="userInfo.headimgurl"></u-image>
										<u-icon v-if="userInfo.headimgurl == ''" name="account-fill" size="60" color="#c0c4cc">
										</u-icon>
									</view>
								</u-upload>
				<!-- #endif -->


			</view>
		</view>

		<view class="per-lists">
			<!-- @click="getnav('/pagesB/my/ModifynickName')" -->
			<view class="items">
				{{$t("用户名")}}
				<view style="width:80%">
					<!-- #ifdef MP-WEIXIN -->
					<input type="nickname" @blur="changeNickname" v-model="userInfo.user_name"  :placeholder="$t('请输入用户名')" />
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<input type="text" v-model="userInfo.user_name"  :placeholder="$t('请输入用户名')" />

					<!-- #endif -->
				</view>
			</view>
		</view>
		<view class="per-lists">
			<view class="items" @click="sexShow=true">
				{{$t("性别")}}
				<view style="width:80%">
					<input type="text" :disabled="true" v-model="userInfo.sexLabel" :placeholder="$t('请选择性别')" />
					<u-select v-model="sexShow" mode="single-column" :list="sexList" @confirm="confirmSex"></u-select>
				</view>
			</view>
		</view>

		<view class="per-lists">
			<view class="items" @click="birthShow=true">
				{{$t("生日")}}
				<view style="width:80%">
					<input type="text" :disabled="true" v-model="userInfo.birth" :placeholder="$t('请选择出生日期')" />
					<u-picker mode="time" v-model="birthShow" @confirm="confirmBirth"></u-picker>
				</view>
			</view>
		</view>


		<view class="person-button">
			<button type="warn" @click="confirmEdit" class="btn">{{$t("确认修改")}}</button>
		</view>
	</view>
</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {},
			isShow: false,
			upLoadAction: this.$baseUrl + 'api/Common/uploadPic',
			formData: {},
			headimgurl: '',
			sexList: [
				{
					value: '1',
					label: this.$t('男')
				},
				{
					value: '2',
					label: this.$t('女')
				},
				{
					value: '0',
					label: this.$t('保密')
				}
			],
			sexShow: false,
			birthShow: false
		};
	},
	onShow() {},
	onReady() {},
	onLoad() {
		this.getUserInfo()
		this.formData = this.$http.returnCommonParams('api/Common/uploadPic', 'usernfo')
	},
	methods: {
		onUploadAvatar(info){
			let url = this.$baseUrl + 'api/Common/uploadPic';
			const avatarUrl = info.detail.avatarUrl
			console.log("avatarUrl", avatarUrl)
			let _this = this;
			uni.uploadFile({
				url,
				filePath: avatarUrl,
				name: 'file',
				formData:this.$http.returnCommonParams('api/Common/uploadPic', 'usernfo'),
				success (res){
					const {data} = JSON.parse(res.data)
					_this.$loading();
					_this.userInfo.headimgurl = data.path;
					_this.headimgurl = data.path;
					console.log('data',data);
					// do something
				}
			})
		},
		changeNickname(e){
			let nickName = e.detail.value;
			this.userInfo.user_name = nickName;
		},
		getUserInfo() {
			this.$http.getUserInfo().then(res => {
				if (res.status == 200) {
					this.userInfo = res.data;
					if(this.userInfo.sex == 0){
						this.userInfo.sexLabel = this.$t('保密')
					}
					if(this.userInfo.sex == 1){
						this.userInfo.sexLabel = this.$t('男')
					}
					if(this.userInfo.sex == 2){
						this.userInfo.sexLabel = this.$t('女')
					}
				}
			})
		},
		confirmSex(v){
			this.userInfo.sex = v['0'].value
			this.userInfo.sexLabel = v['0'].label
		},
		confirmBirth(v){
			this.userInfo.birth = v.year+"-"+v.month+"-"+v.day
		},
		uploadSuccess(res) {
			this.$toast(res.mess)
			if (res.status == 200) {
				this.headimgurl = res.data.path
			}
		},
		confirmEdit() {
			this.$loading();
			const data = {
				headimgurl: this.headimgurl,
				user_name: this.userInfo.user_name,
				sex: this.userInfo.sex,
				birth: this.userInfo.birth
			};

			this.$http.editprofile(data).then(res => {
				if (res.status == 200) {
					this.$toast(res.mess);
					this.$hideLoading()
					uni.$emit('accountLogin', {})
					setTimeout(() => {
						this.$u.route({
							type: 'back'
						})
					}, 1000);
				}
			})
		},
		showDisalePhone() {
			this.$u.toast(this.$t('手机号暂不可修改'))
		}

	},
	onUnload() {
		uni.$off('accountLogin', () => {})
	}
};
</script>

<style scoped>
.upload {
	/* border-radius: 100rpx; */
	overflow: hidden;
}
.avatar-button {
	background: transparent;
	position: relative;
	top: 8px;
}
.avatar-button::after {
	border: 0;
}
.slot-btn {
	width: 100rpx;
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgb(244, 245, 246);
	border-radius: 10rpx;
}

.slot-btn__hover {
	background-color: rgb(235, 236, 238);
}
</style>
